<template>
  <view class="content">
    <view class="address-container" v-if="addressList.length > 0">
      <view class="address-list">
        <block v-for="(item, index) in addressList" :key="index">
          <view class="address-list-item">
            <view>
              <image v-if="item.isDefault == 1" src="/static/icon/addressDefault.png" mode="aspectFit|aspectFill|widthFix"
                lazy-load="true" />
              <view v-else class="address-list-item_left">{{ item.isDefaultName }}</view>
              <view class="address-list-item_center">
                <view>
                  <text class="name">{{ item.name }}</text>
                  <text>{{ item.phone }}</text>
                  <view v-if="item.isDefault == 1" class="default-text">默认</view>
                </view>
                <view>{{ item.province }}{{ item.city }}{{ item.area }}{{ item.detail }}</view>
              </view>
            </view>
            <view @click="deleteAddressHandle(item.id)">
              <u-icon name="/static/icon/delete.png" size="34rpx" color="#999" />
            </view>
            <view @click="editAddressHandle('编辑收货地址',item)" >
              <u-icon name="edit-pen" size="40rpx" color="#999" />
            </view>
          </view>
        </block>
      </view>
    </view>
    <view v-else class="no-address">
      <u-empty icon="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/empty.png" description="暂无收货地址，赶快添加吧" />
    </view>
    <view class="bottom-fixed">
      <view class="btn-wrap">
        <view class="address-btn" :class="addressList.length >= 10 ? 'btn-default' : ''"
          @click="createAddress('新增收货地址')">
          <text>新建收货地址</text>
        </view>
      </view>
      <view class="footer" v-if="addressList.length >= 10">最多支持添加10个收货地址</view>
    </view>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';

export default {
  data() {
    return {
      userId: getUserInfo().ypdUser?.userId,
      addressList: [],
      deleteID: '',
      showDeleteConfirm: false,
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    async init() {
      const { userId } = this;
      let result = await this.$request.miniMyAddress({ userId })
      let spliceArr = [];
      let arr = result.data
      arr.forEach((item, index) => {
        if (item.isDefault == 0) {
          item.isDefaultName = item.name.slice(0, 1);
        } else {
          spliceArr = arr.splice(index, 1);
        }
      });
      if (spliceArr.length > 0) {
        arr.unshift(spliceArr[0]);
      };
      if (arr.length == 0) {
        uni.setStorageSync('cartAddress', {});
      }
      this.addressList = arr
    },
    deleteAddressHandle(id) {
      if (id !== undefined) {
        this.$request.miniDeleteAddress({ id }).then(res => {
          if (res.code == 200) {
            this.init();
            this.$toast('删除成功!')
          }
        });
      }
    },
    editAddressHandle(title,detail) {
      this.$goPath(2, `/pages/premiumBag/mine/addAddress?title=${title}&detail=${JSON.stringify(detail)}`)
    },

    createAddress(title, detail) {
      this.$goPath(2, `/pages/premiumBag/mine/addAddress?title=${title}`)
    },

  },
}
</script>
<style scoped>
page {
  background: #f5f5f5;
  height: 100%;
}

.address-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
  box-sizing: border-box;
}

.address-container .address-list {
  height: 100%;
  font-size: 24rpx;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  border-radius: 16rpx 16rpx;
  padding: 24rpx;
  box-sizing: border-box;
}

.address-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.address-list-item:last-child {
  margin-bottom: 0;
}

.address-list-item>view {
  display: flex;
  align-items: center;
}

.address-list-item>view>image {
  width: 60rpx;
  height: 60rpx;
  display: block;
}

.address-list-item .address-list-item_left {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #FFFFFF;
  background-color: #32B499;
}

.address-list-item_center {
  width: 470rpx;
  margin-left: 15rpx;
}

.address-list-item_center>view {
  display: flex;
}

.address-list-item_center>view .name {
  font-size: 28rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 33rpx;
  display: block;
  margin-right: 5rpx;
}

.address-list-item_center>view .default-text {
  width: 56rpx;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 1rpx solid #32B499;
  text-align: center;
  font-size: 20rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  color: #32B499;
  margin-left: 16rpx;
}

.no-address {
  width: 750rpx;
  padding-top: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #999999;
  font-size: 24rpx;
}

.no-address__icon {
  width: 224rpx;
  height: 224rpx;
}

.no-address__text {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #999999;
  margin-top: 24rpx;
}

.bottom-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 32rpx calc(env(safe-area-inset-bottom) + 12rpx);
}

.btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
}

.btn-wrap .location-btn {
  width: 332rpx;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  color: #333;
  position: relative;
}

.btn-wrap .location-btn::after {
  content: '';
  position: absolute;
  /* 把父视图设置为relative，方便定位*/
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 88rpx;
  border: #dddddd 2rpx solid;
}

.btn-wrap .address-btn {
  width: 400rpx;
  height: 60rpx;
  background: #32B499;
  border-radius: 33rpx 33rpx 33rpx 33rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28rpx;
  line-height: 33rpx;
}

.btn-wrap .btn-default {
  background: #c6c6c6;
}

.bottom-fixed .footer {
  margin-top: 10rpx;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: #ff2525;
  line-height: 60rpx;
  height: 60rpx;
}

.message {
  margin-top: 48rpx;
}

.custom-class {
  margin-right: 12rpx;
  font-weight: normal;
}
</style>